<template>
   <div class="login">


    <div class="loginContent">
                    <div class="logoSingle">综合信息管理系统</div> 
        <div class="tabsBox">
            <ul class="nav nav-pills nav-justified">
                <li :class="{active:tab1}" @click="changepanel('tab1')"><a  >手机/账户登录</a></li>
                <li :class="{active:tab2}" @click="changepanel('tab2')"><a >扫码登录</a></li>
            </ul>
             <!-- Tab panes -->
            <div class="tab-content">
               
                <div v-if="tab1">
                   
                    <div class="formWrap">
                        <div class="form-group form-group-lg">
                            <div class="icon">
                                <img src="@/images/user.svg" />
                            </div>
                            <input v-model="form.name" type="text" class="form-control" placeholder="用户名">
                        </div>
                        <div class="form-group form-group-lg">
                            <div class="icon">
                                <img src="@/images/password.svg" />
                            </div>
                            <input v-model="form.password" type="password" class="form-control" placeholder="密码">
                        </div>
                        <div class="text-right">
                            <a href="#">忘记密码?</a>
                        </div>
                    </div> 
                    <div class="text-center"><button @click="submitFn" class="btn btn-block btn-lg">登录</button></div>
                </div>
                <div  v-if="tab2">
 
                    <div class="formWrap">
       
                    <div class="code">
                       
                        <img src="../images/QR.png">
                    </div>
                    <div class="text-center">微信扫一扫登录</div>
                   </div>
                </div>
            </div>
        </div>
        
    </div>
</div>

</template>

<script setup lang="ts">
import { loginAPI } from '../../src/api/auth';
import { useUserStore } from '../stores/user';
import { ElMessage } from 'element-plus';
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router';
/**
 * 公共使用
 */
 const store = useUserStore();
const router = useRouter();
const route = useRoute();

const tab1 = ref(true);
const tab2 = ref(false);

// 表单数据
const form = ref({
    name:'',
    password:'',
})

const submitFn = async() =>{
    if(!form.value.name || !form.value.password)return ElMessage.error('请输入账号密码'); 
    try {
      // 登录请求
      const res = await loginAPI(form.value);
      console.log(res);
      // 将请求回的用户数据往pinia里存
      store.setUser(res.data);
      ElMessage.success('登录成功');
      // 跳转 到历史地址或用户中心
      router.push(route.query.returnUrl as string || '/home');
    } catch (error) {
      console.log('111', error);
    }
}

function changepanel(tab: string) {
    if (tab === 'tab1') {
        tab1.value = true;
        tab2.value = false;
    } else {
        tab1.value = false;
        tab2.value = true;
    }
}

</script>

<style scoped>
@import "../styles/bootstrap.css";
@import "../styles/font-awesome.css";
@import "../styles/default.css";
@import "../styles/login.css"; 

::-webkit-scrollbar {
  display: none; /* 直接隐藏 */
}
</style>